<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米购物车</title>
    <style>
        * {
            margin: 0 auto;
            padding: 0;
            font-size: 14px;
            text-align: center;
        }
        
        .box {
            width: 1200px;
        }
        
        dl {
            width: 238px;
            float: left;
            border: 1px solid gainsboro;
            margin-bottom: 50px;
        }
        
        dl img {
            width: 100%;
            height: 18%;
        }
        
        dl dd {
            line-height: 30px;
        }
        /* 内容 */
        
        .main table {
            width: 100%;
            border: 1px solid gainsboro;
            line-height: 30px;
        }
        
        .main table tbody {
            line-height: 20px;
        }
        
        .main table img {
            width: 80px;
            height: 100px;
        }
    </style>
</head>

<body>
    <!-- 框架 -->
    <div class="box">
        <!-- 头部 -->
        <div class="header">
            <h2>商品列表展示</h2>
            <div class="bottom">
                <dl>
                    <dt>
                        <img src="../img/1.png" alt="">
                    </dt>
                    <dd>米家电磁炉</dd>
                    <dd>249元</dd>
                    <dd>
                        <button type="button" id="add">加入购物车</button>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <img src="../img/2.png" alt="">
                    </dt>
                    <dd>小米USB Type C 快速充电数据线</dd>
                    <dd>16.9元</dd>
                    <dd>
                        <button type="button" id="add">加入购物车</button>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <img src="../img/3.png" alt="">
                    </dt>
                    <dd>小米随身手电筒</dd>
                    <dd>79元</dd>
                    <dd>
                        <button type="button" id="add">加入购物车</button>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <img src="../img/4.png" alt="">
                    </dt>
                    <dd>米家压力IH电饭煲1S</dd>
                    <dd>899元</dd>
                    <dd>
                        <button type="button" id="add">加入购物车</button>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <img src="../img/5.png" alt="">
                    </dt>
                    <dd>空调（1.5匹/变频/一级能效）</dd>
                    <dd>1999元</dd>
                    <dd>
                        <button type="button" id="add">加入购物车</button>
                    </dd>
                </dl>
            </div>
        </div>
        <!-- 内容 -->
        <div class="main">
            <table border="1" cellpadding="0" cellspacing="0">
                <thead>
                    <tr>
                        <th>全选</th>
                        <th>商品</th>
                        <th>数量</th>
                        <th>单价</th>
                        <th>小计</th>
                        <th>操作</th>
                        <th>时间</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <input type="checkbox">
                        </td>
                        <td>
                            <img src="../img/1.png" alt="">
                            <dd>米家电磁炉</dd>
                        </td>
                        <td>
                            <input type="button" value=" - ">
                            <input type="text" value="1">
                            <input type="button" value=" + ">
                        </td>
                        <td>249元</td>
                        <td>249.00</td>
                        <td>
                            <button type="button" onclick="del()">删除</button>
                        </td>
                        <td>6:58:57</td>
                    </tr>
                </tbody>
                <tfoot>
                    <td>
                        <input type="checkbox">全选按钮
                    </td>
                    <td>
                        <button type="button" id="delAll">删除选中商品</button>
                    </td>
                    <td colspan="4"></td>
                    <td>总价：249</td>
                </tfoot>
            </table>
        </div>
    </div>

    <script>
        var add = document.getElementById('add');
        var delAll = document.getElementById('delAll');

        //建一个空数组，用来存储
        var arr;

        //判断本地存储是否有内容，并渲染
        if (localStorage.arr) {
            var arr = JSON.parse(localStorage.arr);
            show(arr);
        } else {
            arr = [];
        }

        //添加
        add
    </script>
</body>

</html>